<%--
  Created by IntelliJ IDEA.
  User: Deja Vu
  Date: 2020/12/14
  Time: 16:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style type="text/css">
        .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{top: 50%;}
        .layui-table-cell{
            height: auto!important;
            white-space: normal;
        }

    </style>
</head>
<body>
<form id="updateform" lay-filter="updateform" style="display: none" class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">书名</label>
        <div class="layui-input-block">
            <input type="hidden" name="bookId" autocomplete="off" class="layui-input">
            <input type="text" name="bookName" placeholder="请输入图书名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图片</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="addImg">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
            <img id="img" />
            <input type="hidden" name="productImage"class="layui-input" id="img22" name="productImage">

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">价格</label>
        <div class="layui-input-block">
            <input type="text" name="bookPrice" placeholder="请输入价格" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">作者</label>
        <div class="layui-input-block">
            <input type="text" name="author" placeholder="请填写作者" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">库存</label>
        <div class="layui-input-block">
            <input type="text" name="inventory" placeholder="请填库存数量" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">类别</label>
        <div class="layui-input-block">
            <%--下拉列表框--%>
            <select name="cid">

            </select>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">上架</label>
        <div class="layui-input-block">
            <%--下拉列表框--%>
            <select name="bookState">
                <option value="onsale">上架</option>
                <option value="1">下架</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="go">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<table id="demo" lay-filter="myTableFilter"></table>
<%--复选框删除--%>
<button type="button" class="layui-btn" id="deleMany">批量删除</button>
<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    if(${user==null}){
        location.href="login.jsp";
    }
    layui.use(['table','form','layer','upload'], function(){
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var upload = layui.upload;
        //第一个实例
        table.render({
            elem: '#demo'
            ,url: '${pageContext.request.contextPath}/productes' //数据接口
            ,page: true //开启分页
            ,limit:6
            ,limits:[6,12,30]
            ,height:800
            ,cols: [[ //表头
                {type:"checkbox"}
                ,{field: 'bookId', title: '编号'}
                ,{field: 'bookName', title: '书名'}
                ,{field: 'author', title: '作者'}
                ,{field: 'bookPrice', title: '价格'}
                ,{field: 'groundingDate', title: '上架时间'}
                ,{field: 'picPath', title: '封面',templet:function (data) {
                        return "<img src='img/"+data.productImage+"'/>"
                    }}
                ,{field:'bookState', title: '状态',templet:function (data) {
                        if (data.bookState=="onsale"){
                            return "上架";
                        }else {
                            return "下架";
                        }
                    }}
                ,{ title: '操作',toolbar:'#toolbarDemo'}
            ]]
        });
        /*监听工具类*/
        table.on('tool(myTableFilter)',function (obj) {
            var data=obj.data;
            var layEvent = obj.event;
            if(layEvent==='del'){
                //comfirm提示框
                layer.confirm("是否删除",function (index) {
                    //执行ajax
                    $.ajax({
                        url:
                            "${pageContext.request.contextPath}/productes/"+data.bookId,
                        type:"DELETE",
                        success:function () {
                            //重载表格
                            table.reload("demo",{
                                done:function (res,curr,count) {
                                    //删除后可以判断是否有数据，没有数据的话从上一页获取数据展示
                                    if(res.data.length==0&&curr!==1){
                                        table.reload("demo",{page:{curr:curr-1}});
                                    }
                                }
                            });
                            //3.给出删除成功的提示
                            layer.msg("删除成功");
                            layer.close(index);
                        }
                    });
                })
            }

            if(layEvent=='update'){
                $.ajax({
                   url:"${pageContext.request.contextPath}/productes/"+data.bookId,
                   type:"GET",
                   datatype: "json",
                   contentType:"application/json",
                   success:function (data1) {
                       form.val('updateform',data1);
                       layer.open({
                           type:1,
                           title:"修改动物信息",
                           content:$("#updateform"),
                           area:['600px','600px']
                       });
                       form.val('updateform',data1);
                       $("#img").attr('src','img/'+data1.productImage)
                   }
                });

                form.on("submit(go)",function (data1) {
                    var product=data1.field;
                    //发出ajax请求
                    $.ajax({
                        url:"${pageContext.request.contextPath}/productes",
                        type:"PUT",
                        dataType:'json',
                        contentType:"application/json",
                        data:JSON.stringify(product),
                        success:function (obj) {
                            if(obj=="ok"){
                                //关闭弹出层
                                alert(1);
                                layer.closeAll();
                                $("#updateform").get(0).reset();
                                //刷新table表格
                                table.reload("demo");
                                layer.msg("修改成功")
                            }
                        }
                    });
                    /*return false;*/
                })
            }
        })
        //给批量删除按钮添加点击事件开始
        $("#deleMany").click(function () {
            var checkStatus = table.checkStatus('demo');//idTest 即为基础参数id对应的值
            var jsonArray=[];
            if(checkStatus.data.length!=0) {
                for(var i = 0;i<checkStatus.data.length;i++){
                    jsonArray.push(checkStatus.data[i].bookId);
                }
            }else{
                layer.msg("请选中行")
            }
            //发出ajax请求
            $.ajax({
                url:"${pageContext.request.contextPath}/productes",
                data:JSON.stringify(jsonArray),
                contentType:"application/json",
                type:"DELETE",
                success:function () {
                    table.reload("demo",{curr:1})
                }
            });
        });
        //给批量删除按钮添加点击事件结束
        $.ajax({
            url: "categorys",
            type: "GET",
            contentType: "application/json",
            datatype: "json",
            success: function (data) {
                var s = "";
                for (var i = 0; i < data.length; i++) {
                    s += "<option value='" + data[i].categoryId + "'>" + data[i].categoryName + "</option>";
                }

                $("[name='cid']").html(s);
                form.render("select");
            }
        })
        var uploadInst = upload.render({
            elem: '#addImg' //绑定元素
            ,url: 'upload' //上传接口
            ,done: function(res){
                //上传完毕回调
                $("#img").attr("src",res.msg);
                $("#img22").val(res.msg);
            }
        });
    });
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="del">删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
    </div>
</script>
</body>
</html>
